<template>
  <main style="padding: 24px">
    <AgTable
      ref="tableRef"
      :source="getData"
      :columns="columns"
      rowKey="id"
      :filter-row="null"
      @filter-change="handleFilterChange"
    />
  </main>
</template>

<script setup lang="tsx">
import AgTable from '@/components/AgTable.vue';
import { type PrimaryTableProps } from '@blueking/tdesign-ui';
import { computed, ref, useTemplateRef } from 'vue';

const tableRef = useTemplateRef('tableRef');

const filterValue = ref({
  method: [],
});

const methodFilterList = ref([
  {
    label: 'All',
    checkAll: true,
  },
  {
    label: 'GET',
    value: 'GET',
  },
  {
    label: 'POST',
    value: 'POST',
  },
]);

const columns = computed<PrimaryTableProps['columns']>(() => [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 80,
    fixed: 'left',
  },
  {
    colKey: 'id',
    fixed: 'left',
    width: 80,
  },
  {
    colKey: 'name',
    title: '资源名称',
    width: 170,
    fixed: 'left',
    cell: (h, { row }) => (
      <div class="resource-name">
        <div
          v-bk-tooltips={{ content: row.name, placement: 'right', delay: 300 }}
          class={['name', { 'name-updated': row.has_updated }]}
        >
          {row.name}
        </div>
        {row.has_updated
          ? <div
            v-bk-tooltips={{ content: '资源已更新', placement: 'right', delay: 300 }}
            class="dot warning"
          ></div>
          : ''
        }
      </div>
    ),
  },
  {
    colKey: 'backend.name',
    title: '后端服务',
    width: 130,
  },
  {
    colKey: 'method',
    title: '前端请求方法',
    width: 130,
    cell: (h, { row }) => (
      <bk-tag theme="success">
        {row.method}
      </bk-tag>
    ),
    filter: {
      type: 'multiple',
      showConfirmAndReset: true,
      resetValue: [],
      list: methodFilterList.value,
    },
  },
  {
    colKey: 'path',
    title: '前端请求路径',
  },
  {
    colKey: 'plugin_count',
    title: '插件数',
    width: 40,
    cell: (h, { row }) => (
      <div class="plugin-num">
        {row.plugin_count}
      </div>
    ),
  },

]);

const handleFilterChange: PrimaryTableProps['onFilterChange'] = (filterValue, context) => {
  // console.log('filterValue:', filterValue);
  const colKey = context.col!.colKey
  let params: Record<string, any> = {}
  if (colKey === 'method') {
    params = { method: filterValue.method.join(',') }
  }
  tableRef.value!.fetchData(params)
}

const getData = async (params: Record<string, any>) => {
  // console.log('getData params:', params);
  if (params.offset === 0) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          count: 12,
          results: [
            {
              id: 1,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 2,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 3,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 4,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 5,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 6,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 7,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 8,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 9,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 10,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
          ],
        })
      }, 500)
    })
  } else {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          count: 12,
          results: [
            {
              id: 11,
              name: 'get_user',
              method: 'GET',
              backend: { name: 'prod' },
              has_updated: true,
              path: '/xxx',
              plugin_count: 1,
            },
            {
              id: 12,
              name: 'get_user2',
              method: 'POST',
              backend: { name: 'prod' },
              has_updated: false,
              path: '/xxx',
              plugin_count: 1,
            },
          ],
        })
      }, 500)
    })
  }
}

</script>
